<template>
    <div>
      <div class="content" v-if="headerAdd">
        <el-form :inline="true" :model="queryParams" class="demo-form-inline">
          <el-form-item label="菜单名称">
            <el-input
              v-model="queryParams.menuName"
              clearable
              placeholder="菜单名称"
            ></el-input>
          </el-form-item>
          <el-button type="primary" @click="btnAdd">新增</el-button>
          <el-button type="primary" plain @click="getList">查询</el-button>
        </el-form>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column
            prop="menuName"
            label="菜单名称"
            :align="'center'"
            width="100"
          ></el-table-column>
          <!-- <el-table-column prop="homeIcon" label="首页广告图片" :align="'center'">
            <template slot-scope="scope">
              <div class="demo-image__preview">
                <el-image
                  style="width: 52px; height: 52px"
                  :src="scope.row.homeIcon"
                  :zoom-rate="1.2"
                  :max-scale="7"
                  :min-scale="0.2"
                  :preview-src-list="[scope.row.homeIcon]"
                  fit="cover"
                ></el-image>
              </div>
            </template>
          </el-table-column> -->
          <el-table-column
            prop="menuType"
            label="菜单类型"
            :align="'center'"
          ></el-table-column>
          <el-table-column
            prop="menuIcon"
            label="图标地址"
            :align="'center'"
          ></el-table-column>
          <el-table-column
            prop="menuCenter"
            label="功能说明"
            :align="'center'"
          ></el-table-column>
          <el-table-column
            prop="menuFlag"
            label="申请状态"
            :align="'center'"
          ></el-table-column>
          <el-table-column fixed="right" label="操作" width="250">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleView(scope.row)"
                >查看</el-button
              >
              <el-button type="text" size="small" @click="handleEdit(scope.row)"
                >编辑</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="handleDel(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="footer" v-if="headerAdd">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
      <add
        v-if="addShow"
        :objData="objData"
        :isEdit="isEdit"
        @banfan="banfan"
      ></add>
      <detail
        v-if="viewShow"
        :objData="objData"
        @handleCancle="handleCancle"
      ></detail>
    </div>
  </template>
  <script>
  import add from "./component/add";
  import detail from "./component/detail";
  import { list, del } from "@/api/gongneng/index";
  export default {
    name: "fukuang",
    data() {
      return {
        objData:{},
        menuName:"",
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          menuName: "",
        },
        headerAdd: true,
        addShow: false,
        viewShow: false,
        loading: false,
        isEdit: false,
        tableData: [],
        total: 0,
      };
    },
    components: {
      add,
      detail,
    },
    mounted() {
      this.getList();
    },
    methods: {
        banfan(){
            this.headerAdd=true
            this.addShow=false
            this.getList();
          
        },
      handleCancle() {
        this.addShow = false;
        this.headerAdd = true;
        this.viewShow = false;
        this.isEdit = false;
        this.getList();
      },
      // 新增
      btnAdd() {
        this.addShow = true;
        this.viewShow = false;
        this.headerAdd = false;
        this.isEdit = false;
      },
      // 编辑
      handleEdit(row) {
        this.addShow = true;
        this.viewShow = false;
        this.headerAdd = false;
        this.isEdit = true;
        this.objData = row;
      },
      // 查看
      handleView(row) {
        this.addShow = false;
        this.viewShow = true;
        this.headerAdd = false;
        this.objData = row;
      },
      // 删除
      handleDel(e) {
        this.$confirm("确定要删除该条记录吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            del(e.menuId).then((res) => {
              if (res.code === 200) {
                this.$message.success("删除成功");
                this.getList();
              }
            });
          })
          .catch(() => {});
      },
      // 查询列表
      getList() {
        this.loading = true;
        list(this.queryParams).then((response) => {
          this.tableData = response.rows;
          this.total = +response.total;
          this.loading = false;
        });
      },
      handleCurrentChange(e) {
        this.queryParams.pageNum = e;
        this.getList();
      },
      handleSizeChange(e) {
        this.queryParams.pageSize = e;
        this.getList();
      },
    },
  };
  </script>
  <style scoped lang="scss">
  .content {
    width: 98%;
    margin: 0 auto;
    margin-top: 30px;
  }
  .demo-image__preview {
    cursor: pointer;
  }
  .demo-image__error .image-slot {
    font-size: 30px;
  }
  .demo-image__error .image-slot .el-icon {
    font-size: 30px;
  }
  .demo-image__error .el-image {
    width: 100%;
    height: 200px;
  }
  .footer {
    display: flex;
    justify-content: end;
    padding-right: 40px;
    padding-top: 23px;
  }
  </style>
  